<template>
	<view class="main">
		<view class="banner">
			<swiper class="swiper-main" indicator-dots="true" interval="3000" autoplay="true" circular="true">
				<swiper-item class="swiper-item" v-for="(item,index) in banners" :key="index" v-if="index<3" >
					<image :src="item.images_url" mode="widthFix" @click="banner_event"></image>
					<!-- <image :src="item" mode="widthFix"></image> -->
				</swiper-item>
			</swiper>
		</view>

		<view class="banner_top">
			<view class="nav" ref="fixed">
				<view class="sort_icon" @click="OnSort()">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2024/01/04/4561be57b4e247489e63e62fba0630ce.png" mode="widthFix"></image>
					<view class="">分类</view>
				</view>
				<view class="nav_search">
					<input type="text" placeholder="请输入您要搜索的内容" />
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/18/52efb1674d6c4683a241d2dde61d94a3.png" mode="widthFix"></image>
				</view>
				<view class="nav_price" @click="goPrice()">
					<swiper class="swiper-container" direction="vertical" vertical="true" interval="3000" autoplay="true" style="height: 100%;">
						<swiper-item class="swiper-slide" v-for="(item,index) in glod_list" :key="index">
							<!-- <view class="sslj">{{item.code === 'Au99.99' ? '黄金9999' : item.code === 'JZJ_au' ? '黄金' : item.code === 'JZJ_ag' ? '白银' : item.code === 'JZJ_pt' ? '铂金' : item.code === 'JZJ_pd' ? '钯金': item.code ==='RH_JZL' ? '铑金' :item.code === 'JZJ_IR' ? '铱' : item.code ==='JZJ_RU' ? '钌' : item.code === 'mAu(T+D)' ? '黄金T+D' : item.code === 'Ag(T+D)' ? '白银T+D' : item.code === 'Pt99.95' ? '铂金9995' : item.code === 'FT:US.GCmain' ? '美黄金' : item.code === 'FT:US.SImain' ? '美白银' : item.code === 'FT:US.PLmain' ? '美铂金' : item.code === 'FT:US.PAmain' ? '美钯金' : item.code === 'RH' ? '美铑金' : item.code === 'XAU' ? '伦敦金' : item.code === 'XAG' ? '伦敦银' : item.code === 'XAP' ? '伦敦铂' : item.code === 'XPD' ? '伦敦钯' : item.code === 'USDCNH' ? '美元' : item.code === 'Au(T+D)' ? '小黄金' : item.code === 'SG5124' ? 'SG5124' : ''}}</view> -->
							<view class="sslj">{{item.name}}</view>
							<view class="">￥{{(item.askprice*1).toFixed(2)}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="logo">
				<view class="nav_positioning">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/18/3bca847cd6254190b269b485e22cc3b8.png" mode="widthFix"></image>
				</view>
				<view class="logo_name">Moxi黄金珠宝商城</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["banners","glod_list"],
		// props: ["message"],
		data() {
			return {
				// top: '20px',
				// bannerList:[
				// 	"https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/28/7d6d2b9716eb491a8a53ba3d1ab753e4.png",
				// 	"https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/28/3d63d4dbe69d4041a3424feabd35cec6.png",
				// 	"https://t1.chowtaiking.com.cn/img/ruoyi/2024/01/04/644e24e01faa495d872bf84f81ceebe1.png"
				// ]
			}
		},
		methods: {
			// 跳转到金价页面
			goPrice() {
				uni.navigateTo({
					url: "/pages/glod-price/glod-price"
				})
			},
			// 跳转到商品分类页面
			OnSort() {
				uni.navigateTo({
					url: "/pages/goods_sort/goods_sort"
				})
			},
			banner_event(){				
					uni.navigateTo({
						url: "/pages/canvas/canvas"
					})
			}
		},
		onLoad() {
			console.log(banners);
		}
	}
</script>

<style lang="less">
	/* CSS样式中设置固定定位 */

	/* 	.sticky {
		position: fixed;
		top: 0px;
		width: 89%;
		margin: 20px 20px;
	} */

	.main {
		position: relative;
		// padding-top: 120px;
	}

	.banner {
		width: 100%;

		.swiper-main {
			width: 100%;
			height: 82vh !important;

			.swiper-item {
				width: 100%;
				height: 82vh !important;
				
				image {
					width: 100% !important;
					height: 82vh !important;
				}
			}

		}

	}

	/* 头部导航--搜索 */
	.nav {
		position: absolute;
		top: 15px;
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		align-items: center;
		margin-top: 50px !important;

		.sort_icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 13px;
			color: #515151;
			image {
				width: 20px;
				margin-left: 7px;
				margin-right: 7px;
				margin-top: 20px;
			}
		}
	}

	/* 搜索框 */
	.nav_search {
		position: relative;
		width: 60%;
		height: 40px;
		background-color: #f1f7f7;
		opacity: 0.5;
		border-radius: 20px;
		padding-left: 10px;
		line-height: 30px;
		margin-top: 20px;
	}

	/* 搜索输入框 */
	.nav_search input {
		height: 40px;
		line-height: 30px;
		align-items: center;
	}

	/* 搜索框里面的 logo */
	.nav_search image {
		width: 25px;
		height: 25px;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.nav_price {
		margin-right: 10px;
		margin-left: 5px;
		color: #fcaf00;
		height: 60px;
		width: 100px;
		margin-top: 20px;
	}

	.swiper-container{
		height: 100%;
		width: 100%;
	}
	
	.swiper-slide {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  height: 60px; 
	  width: 100%;
	  padding: 10px;
	  box-sizing: border-box;
	}
	
	.sslj {
		width: 90px;
		height: 20px;
		line-height: 22px;
		text-align: center;
		font-size: 9px;
		border-radius: 5px;
		background-color: white;
	}

	.logo {
		display: flex;
		position: absolute;
		top: 45px;
	}

	.logo_name {
		margin-left: 55px;
	}

	/* 左边定位 logo */
	.nav_positioning {
		margin-left: 20px;
	}

	.nav_positioning image {
		width: 20px;
		height: 28px;
	}
</style>